<template>
  <view class="filings-box" :class="props.showTel ? 'filings-box-tel' : ''">
    <view class="filings t-c">
      <text class="text gray9 fz30">{{ state.filings }}</text>
      <text class="tel gray9 fz28" v-if="props.showTel">{{ state.phone }}</text>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive, getCurrentInstance } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  const { proxy } = getCurrentInstance();

  const props = defineProps({
    showTel: {
      type: Boolean,
      default: false
    }
  });

  const state = reactive({
    phone: '',
    filings: ''
  });

  // 页面加载完成
  onLoad(async () => {
    await proxy.$onLaunched;
    state.phone = getApp().globalData.phone;
    state.filings = getApp().globalData.filings;
  });
</script>

<style lang="less" scoped>
  @import url('@/common/less/common.less');

  .filings {
    position: fixed;
    width: 750rpx;
    bottom: 0;
    left: 50%;
    z-index: 90;
    line-height: 100rpx;
    background: @bg;
    transform: translateX(-50%);

    &-box {
      height: 100rpx;

      &-tel {
        height: 150rpx;
        line-height: 75rpx;

        .filings {
          padding-bottom: 50rpx;
        }
      }
    }

    .text {
      display: inline-block;
      position: relative;
      z-index: 9;
      padding: 0 30rpx;
      background: @bg;
    }

    .tel {
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: 10;
      width: 100%;
      transform: translateX(-50%);
    }

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2rpx;
      background: #ccc;
      transform: translateY(-50%);
    }
  }
</style>
